<template>
    <div>
        <cu-navbar>
            <block slot="content">商品详情</block>
        </cu-navbar>
        <view class="product-detail-page page">
            <div class="product-detail">
                <div class="product-name">{{ productDetail.goods_name }}</div>
                <u-image :src="productDetail.image" style="width: 216rpx;height: 230rpx;margin-top: 30rpx"></u-image>
                <div class="product-desc">
                    <div class="product-desc-title">商品说明</div>
                    <div class="product-desc-value">
                        {{ productDetail.desc }}
                    </div>
                </div>
            </div>
            <div class="product-detail-price">
                <span class="title">商品金额</span>
                <span class="value">¥ {{ productDetail.price }} + 金积分 {{ productDetail.maket_price}}</span>
            </div>
            <div class="product-detail-price" style="height: initial">
                <u-form labelPosition="left" labelWidth="160rpx"  ref="form1">
                    <u-form-item label="银行账户名" prop="userInfo.bank_username" borderBottom ref="item1">
                        <u-input placeholder="请输入银行账户号" v-model="formData.bank_name" ></u-input>
                        <div class="button f-s" @click="copy(formData.bank_name)">复制</div>
                    </u-form-item>
                    <u-form-item label="开户分行" prop="userInfo.bank_name" borderBottom ref="item1">
                        <u-input placeholder="请输入开户分行" v-model="formData.bank_kname" ></u-input>
                        <div class="button f-s" @click="copy(formData.bank_name)">复制</div>
                
                    </u-form-item>
                    <u-form-item label="银行卡号" prop="userInfo.bank_no" borderBottom ref="item1">
                        <u-input placeholder="请输入银行卡号" v-model="formData.bank_num" ></u-input>
                        <div class="button f-s" @click="copy(formData.bank_num)">复制</div>
                
                    </u-form-item>
                    <u-form-item label="姓名" prop="userInfo.bank_no" borderBottom ref="item1">
                        <u-input placeholder="请输入银行卡姓名" v-model="formData.bank_username" ></u-input>
                        <div class="button f-s" @click="copy(formData.bank_username)">复制</div>
                    </u-form-item>
                    <u-form-item label="支付凭证" prop="userInfo.alpay_no" borderBottom ref="item1">
                        <u-upload
                            @on-success="uploadAlipic"
                            @on-remove="removeAlipic"
                            name="file"
                            :action="action"
                            :max-count="1" :header="header" :file-list="aliPicList" ></u-upload>
                    </u-form-item>
                </u-form>
            </div>
            <div class="product-detail-address">
                <span class="title">收获地址</span>
                <span class="edit-text" @click="editAddress">(点击编辑)</span>
            </div>
            <div class="product-detail-address-list">
                <div class="product-detail-address-list__field">
                    <div class="product-detail-address-list__field_label">收货人</div>
                    <div class="product-detail-address-list__field_value">{{ address.consignee }}</div>
                </div>
                <div class="product-detail-address-list__field">
                    <div class="product-detail-address-list__field_label">联系方式</div>
                    <div class="product-detail-address-list__field_value">{{ address.mobile }}</div>
                </div>
                <div class="product-detail-address-list__field">
                    <div class="product-detail-address-list__field_label">所在地区</div>
                    <div class="product-detail-address-list__field_value">{{ address.address }}</div>
                </div>
                <div class="product-detail-address-list__field">
                    <div class="product-detail-address-list__field_label">详细地址</div>
                    <div class="product-detail-address-list__field_value">{{ address.detailaddress }}</div>
                </div>
            </div>
        
            <div class="product-detail-button">
                <u-button  type="error"
                           @click="confirm"
                           :custom-style="{ backgroundColor: '#ff2e26', width: '100%'}">确定购买</u-button>
            </div>
        </view>
    </div>
</template>

<script>
import {API_URL} from "../../env";

export default {
    data() {
        return {
            productDetail: {

            },
            address: {},
          action: `${API_URL}index.php/api/common/upload`,
          header: {
            token: uni.getStorageSync("token"),
          },
          seconds: 60,
          smscode: '',
          aliPicList: [],
          weixinpicList: [],
          avatarList: [],
          tips: '',
          formData: {

          },
        }
    },
    onLoad(e) {
        this.$api
            .dhdddetails({
                id: e.id
            })
            .then((res) => {
                if (res.code == 1) {
                    this.productDetail =res.result
                }
                console.log(res)
            });

      this.$api.getAccount().then(res => {
        this.formData = {
          ...res.result,
          img: ''
        }
      })
    },
    onShow() {
        this.$api
            .userdefaultaddress({
            })
            .then((res) => {
                if (res.code == 1 && res.result && res.result.filter(el => el.isdefault == 1).length) {
                    this.address = res.result.filter(el => el.isdefault == 1)[0]
                }
                console.log(res)
            });
        this.$api
            .userdefaultaddress({
            })
            .then((res) => {
                if (res.code == 1 && res.result && res.result.filter(el => el.isdefault == 1).length) {
                    this.address = res.result.filter(el => el.isdefault == 1)[0]
                }
                console.log(res)
            });
        this.$api
            .userdefaultaddress({
            })
            .then((res) => {
                if (res.code == 1 && res.result && res.result.filter(el => el.isdefault == 1).length) {
                    this.address = res.result.filter(el => el.isdefault == 1)[0]
                }
                console.log(res)
            });
    },
    methods: {
      copy(data) {
        uni.setClipboardData({
          //去找上面的数据
          data,
          success: function (res) {
            uni.showToast({
              title: "复制成功",
            });
          },
          fail: function (res) {
            console.log(res);
          },
        });
      },
      uploadAlipic(e) {
        this.formData.img = e.result.fullurl
      },
      removeAlipic() {
        this.formData.img = ''
      },
        editAddress() {
            uni.navigateTo({
                url: '/pages/address/edit?id=' + this.address.address_id
            })
        },
        confirm() {
          if (!this.formData.img) return this.$common.errorToShow('支付凭证不能为空')
          this.$api
                .buy({
                    id: this.productDetail.goods_id,
                    jf: this.productDetail.price,
                    address_id: this.address.id,
                    num: 1,
                  img: this.formData.img
                })
                .then((res) => {
                    uni.showToast({
                        title: res.reason,
                        icon: 'none'
                    })
                });
        }
    }
}
</script>

<style scoped lang="scss">
.product-detail-page{
    padding-bottom: 200rpx;
    .product-detail {
        background-color: #ffffff;
        margin-bottom: 30rpx;
        padding: 30rpx;
        .product-name {
            font-size: 30rpx;
            font-weight: 400;
            color: #333;
            line-height: 46rpx;
        }
        .product-desc {
            margin-top: 20rpx;
            .product-desc-title {
                font-size: 30rpx;
                font-weight: 400;
                color: #333;
                line-height: 46rpx;
            }
            .product-desc-value {
                padding: 20rpx;
                font-size: 24rpx;
                font-weight: 400;
                color: #999;
                line-height: 36rpx;
            }
        }
    }

    .product-detail-button {
        box-sizing: border-box;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: #ffffff;
        padding: 20rpx;
        width: 100%;
    }
    .product-detail-address-list {
        background-color: #ffffff;
        padding: 0 20rpx 20rpx;
        .product-detail-address-list__field {
            display: flex;
            align-items: center;
            position: relative;
            padding: 20rpx;
            border-bottom: 1px solid #f2f2f2;
        }
        .product-detail-address-list__field_label {
            font-size: 30rpx;
            color: #999999;
            margin-right: 30rpx;
            width: 180rpx;
        }
        .product-detail-address-list__field_value {
            font-size: 30rpx;
            color: #333333;
        }
    }
    .product-detail-address {
        font-size: 36rpx;
        font-weight: 400;
        color: #333;
        line-height: 84rpx;
        background-color: #ffffff;
        padding: 20rpx 30rpx;
        border-bottom: 1px solid #f2f2f2;

        .edit-text {
            color: rgb(153, 153, 153);
        }
    }
    .product-detail-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        height: 84rpx;
        padding: 0 30rpx;
        border-bottom: 1px solid #f2f2f2;
      .button {
        width: 50px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background: #ff443b;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        margin-left: 10px;
      }
        .title {
            font-size: 30rpx;
            font-weight: 400;
            color: #333;
            line-height: 84rpx;
        }
        .value {
            color: #fc4141;
            font-size: 30rpx;
            font-weight: 400;
            line-height: 84rpx;
        }
    }
}
</style>
